<script setup lang="ts">

// import { RouterLink, RouterView } from 'vue-router'
// import HelloWorld from './components/HelloWorld.vue'

import { ref,computed ,onMounted} from 'vue'

import TodoList from '../components/TodoList.vue'
// const awesome = ref(true)

// const items = ref([{message:'one'},{message:'two'},{message:'three'},{message:'four'},{message:'five'},{message:'six'},{message:'seven'},{message:'eight'},{message:'nine'},{message:'ten'},])

const todos = ref([]) //{ message: 'one', isCompleted: true }, { message: 'two' }, { message: 'three' }, { message: 'four' }, { message: 'five' }, { message: 'six' }, { message: 'seven' }, { message: 'eight' }, { message: 'nine' }, { message: 'ten' },])

const cacheKey='todos'

const arrIndex=ref(0)
const addTodo = () => {
 // alert('hi,there!!'+newMessage.value)

 const newTodo = {id: arrIndex.value++, message: newMessage.value, isCompleted: false }

  todos.value.push(newTodo)

    localStorage.setItem(cacheKey,JSON.stringify(todos.value))
  
}
onMounted(() => {
  const localItems=localStorage.getItem(cacheKey)
   if(localItems!=null){

        todos.value= JSON.parse(localItems) 
    }
  console.log(`the component is now mounted.`)
})
const completed = computed(() => { //响应式
  return todos.value.filter(todo => todo.isCompleted)
})

const uncompleted = computed(() => {
  return todos.value.filter(todo => !todo.isCompleted)
})

const del = (item) => {
   const index = todos.value.findIndex(todo=> todo.id === item.id)
  todos.value.splice(index, 1)
   localStorage.setItem(cacheKey,JSON.stringify(todos.value))
}

const update2 = (item) => {
  const index = todos.value.findIndex(todo=> todo.id === item.id)
  todos.value[index]= item   //.isCompleted = !todos.value[index].isCompleted


  sessionStorage.setItem(cacheKey,JSON.stringify(todos.value))
   localStorage.setItem(cacheKey,JSON.stringify(todos.value))
}

const newMessage = ref('')
</script>
<template> 
<header>
    <input type="text" placeholder="Enter an activity.." v-model="newMessage" @keyup.enter="addTodo">
    <button id="add" @click="addTodo">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
        <g>
          <path class="fill"
            d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z" />
        </g>
      </svg>
    </button>

  </header>

  <div class="container" style="margin-top: 100px;">
    <!-- Uncompleted tasks -->
   <TodoList :list="uncompleted" @updateitem="update2" @del="del" />


    <h1>下面是完成的</h1>
    <!-- Completed tasks -->
    <TodoList :list="completed" @updateitem="update2" @del="del" />
  </div>
</template>

<style scoped>
body {
  background: #edf0f1;
  padding: 80px 0 0 0;
}

body,
input,
button {
  font-family: 'Roboto', sans-serif;
}



header {
  width: 100%;
  height: 80px;

  position: fixed;
  padding: 15px;
  top: 0;
  left: 0;
  z-index: 5;

  background: #25b99a;
  box-shadow: 0px 2px 4px rgba(44, 62, 80, 0.15);
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

header input {
  width: 100%;
  height: 50px;
  float: left;
  color: #fff;
  font-size: 15px;
  font-weight: 400;
  text-indent: 18px;
  padding: 0 60px 0 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 5px 25px 25px 5px;
  border: 0px;
  box-shadow: none;
  outline: none;

  -webkit-appearance: none;
  -moz-appearance: none;
}

header input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header input:-moz-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header input::-moz-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.75);
}

header button {
  width: 50px;
  height: 50px;

  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 2;

  border-radius: 25px;
  background: #fff;
  border: 0px;
  box-shadow: none;
  outline: none;
  cursor: pointer;

  -webkit-appearance: none;
  -moz-appearance: none;
}

header button svg {
  width: 16px;
  height: 16px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -8px 0 0 -8px;
}

header button svg .fill {
  fill: #25b99a;
}

.container {
  width: 100%;
  float: left;
  padding: 15px;
}

</style>